<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>publish</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="/zico/css/zico.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <script src="/jquery/jquery.js"></script>
    <script src="/popper/umd/popper.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/editormd/css/editormd.css">
    <script src="/editormd/editormd.min.js"></script>

    <link rel="stylesheet" href="/css/demo.css">
    <script src="/js/demo.js"></script>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<main class="container">
    <div class="container-fluid p-5">
        <div class="row">
            <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
                <h2><i class="zi zi_plusSquare"></i></span>  发起</h2>
                <hr>

                <form action="/publish" method="post">
                    <input type="hidden" name="id" th:value="${id}">
                    <div class="form-group">
                        <label for="title">问题标题（简单扼要）：</label>
                        <input th:value="${title}" type="text" autocomplete="off" class="form-control" id="title"
                               name="title" placeholder="问题标题……">
                    </div>
                    <div class="form-group">
                        <label for="description">问题补充（必填，请参照右侧提示）：</label>
                        <!--                        <textarea th:text="${description}" name="description" id="description" autocomplete="off" class="form-control" cols="30" rows="10"></textarea>-->
                        <div id="editor">
                            <textarea style="display: none" th:text="${description}" name="description" id="description">
                            </textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="tag">添加标签</label>
                        <input th:value="${tag}" type="text" class="form-control" onclick="showTags()" id="tag"
                               name="tag" autocomplete="off" placeholder='输入标签，以","分隔'>
                        <div class="mt-2 display-none" id="select-tags">
                            <ul class="nav nav-tabs">
                                <li class="nav-item" th:each="category, categoryStat : ${tags}">
                                    <a th:href="@{'#' + ${category.getCategoryName()}}" class="nav-link"
                                       data-toggle="tab" th:classappend="${categoryStat.first ? 'active' : ''}"><span
                                            th:text="${category.getCategoryName()}"></span></a>
                                </li>
                            </ul>
                            <div class="tab-content py-3">
                                <div th:id="${category.getCategoryName()}" class="tab-pane"
                                     th:each="category, categoryStat : ${tags}"
                                     th:classappend="${categoryStat.first ? 'active' : ''}">
                                    <span class="badge badge-info m-1 p-1" onclick="selectTag(this)"
                                          th:each="myTag : ${category.getTags()}">
                                        <i class="zi zi_tag" zico="标签黑"></i>
                                        <span th:text="${myTag}"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <span class="text-danger" th:text="${error}"></span>
                    <button type="submit" class="btn btn-success float-right">确认发起</button>
                </form>
            </div>
            <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
                <h3>问题发起指南</h3>
                <ul>
                    <li>问题标题: 请用精简的语言描述您发布的问题，不超过25字</li>
                    <li>问题补充: 详细补充您的问题内容，并确保问题描述清晰直观, 并提供一些相关的资料：</li>
                    <li>选择标签: 选择一个或者多个合适的标签，不超过10个字</li>
                </ul>
            </div>
        </div>
    </div>
</main>
<script>
    $(function () {
        let editor = editormd("editor", {
            width  : "100%",
            height : "500px",
            path: "/editormd/lib/",
            delay: 0,
            watch: false,
            placeholder: "请输入问题描述"
        });
    })
</script>
</body>
</html>